<template>
    <div class="app-container">
        <el-form :model="formModel" ref="formRef" inline>
            <el-card class="block-container" shadow="never">
                <el-row slot="header">
                    <span>基本设置</span>
                </el-row>
                <div style="padding: 12px 36px;">
                    <el-row>
                        <el-form-item
                            required
                            label="团长审核"
                            label-width="120px"
                            prop="headVerify"
                        >
                            <el-radio-group v-model="formModel.headVerify">
                                <el-radio :label="'ON'">开启</el-radio>
                                <el-radio :label="'OFF'">关闭</el-radio>
                            </el-radio-group>
                            <span class="verify-tip"
                                >关闭审核，则申请即为团长，系统自动审核同意</span
                            >
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item
                            required
                            label="售罄商品"
                            label-width="120px"
                            prop="soldOutGoodsDisplayType"
                        >
                            <el-radio-group v-model="formModel.soldOutGoodsDisplayType">
                                <el-radio :label="'DISPLAY'">显示</el-radio>
                                <el-radio :label="'HIDDEN'">隐藏</el-radio>
                                <el-radio :label="'DISPLAYONTAIL'">显示且排到最后位置</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item
                            required
                            label="每日备货时间"
                            label-width="120px"
                            prop="times"
                        >
                            <el-time-picker
                                is-range
                                value-format="HH:mm:ss"
                                v-model="formModel.times"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                            ></el-time-picker>
                            <span class="verify-tip"
                                >此时间内消费者不可下单，系统对订单进行日结统计</span
                            >
                        </el-form-item>
                    </el-row>
                </div>
            </el-card>
            <el-card class="block-container" shadow="never">
                <el-row slot="header">
                    <span>结算设置</span>
                </el-row>
                <div style="padding: 12px 36px;">
                    <el-row>
                        <el-form-item
                            required
                            label="团长最低提现"
                            label-width="120px"
                            prop="minWithdrawalAmount"
                        >
                            <el-input v-model="formModel.minWithdrawalAmount" style="width: 160px">
                                <span slot="append">元</span>
                            </el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item
                            required
                            label="团长结算时间"
                            label-width="130px"
                            prop="settleDaysToHead"
                        >
                            <span>商品售后期结束后</span>
                            <el-input v-model="formModel.settleDaysToHead" style="width: 160px">
                                <span slot="append">天</span>
                            </el-input>
                            <span>结算利润给团长</span>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item
                            required
                            label="供货商结算时间"
                            label-width="130px"
                            prop="settleDaysToSupplier"
                        >
                            <span>商品售后期结束后</span>
                            <el-input v-model="formModel.settleDaysToSupplier" style="width: 160px">
                                <span slot="append">天</span>
                            </el-input>
                        </el-form-item>
                    </el-row>
                </div>
            </el-card>
            <el-card class="block-container" shadow="never">
                <el-row slot="header">
                    <span>订单设置</span>
                </el-row>
                <div style="padding: 12px 36px;">
                    <el-form-item required label="未支付订单自动取消时间" prop="autoCancleMin">
                        <el-select v-model="formModel.autoCancleMin">
                            <el-option label="5分钟" :value="5">
                                5
                            </el-option>
                            <el-option label="10分钟" :value="10">
                                10
                            </el-option>
                            <el-option label="15分钟" :value="15">
                                10
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-card>
            <el-row type="flex" justify="center">
                <el-button
                    type="primary"
                    size="small"
                    style="width: 200px"
                    @click="handleSaveConfig"
                    >保存</el-button
                >
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { getSettings, updateSettings } from '@/api/global';
export default {
    data() {
        return {
            formModel: {
                id: null,
                headVerify: 'ON',
                soldOutGoodsDisplayType: 'DISPLAY',
                times: null,
                minWithdrawalAmount: null,
                settleDaysToHead: null,
                settleDaysToSupplier: null,
                autoCancleMin: null
            }
        };
    },
    created() {
        this.fetchSettings();
    },
    methods: {
        fetchSettings() {
            getSettings().then(res => {
                if (res.data.success) {
                    this.formModel = {
                        ...res.data.data,
                        times: [res.data.data.startStoreTime, res.data.data.endStoreTime]
                    };
                }
            });
        },
        handleSaveConfig() {
            updateSettings(this.formModel).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功！',
                        type: 'info',
                        duration: 3000
                    });
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.block-container {
    /deep/ .el-form-item__label {
        text-align: left;
    }
    .verify-tip {
        margin-left: 32px;
        color: #f56c6c;
        line-height: 20px;
    }
}
</style>
